import React, { PureComponent } from 'react'
import { BackHandler, Animated, Easing, Image } from 'react-native'
import {
  NavigationActions,
} from 'react-navigation'
import { createStackNavigator } from 'react-navigation-stack';
import { createBottomTabNavigator } from 'react-navigation-tabs';
import {
  createReduxContainer,
  createNavigationReducer,
} from 'react-navigation-redux-helpers'
import NetInfo from "@react-native-community/netinfo";
import AsyncStorage from '@react-native-community/async-storage';
import AliyunPush from 'react-native-aliyun-push';
import { connect } from 'react-redux';
import ApplicationList from './routes/Home/ApplicationList'

//------------调试时请注释掉
console.disableYellowBox = true;

function defaultNavigationOptions(props) {
  const { navigation, navigationOptions, screenProps } = props;
  return {
    headerStyle: {
      backgroundColor: '#3F51B5'
    },
    headerTintColor: '#fff',

  };
};

let stackConfig = {
  headerBackTitleVisible: false,
  headerLayoutPreset: 'center',
  defaultNavigationOptions,
  navigationOptions: {
    headerBackTitle: null,
    showIcon: true,
  },
  transitionConfig: () => ({
    transitionSpec: {
      duration: 300,
      easing: Easing.out(Easing.poly(4)),
      timing: Animated.timing,
    },
    screenInterpolator: sceneProps => {
      const { layout, position, scene } = sceneProps
      const { index } = scene

      const height = layout.initHeight
      const translateY = position.interpolate({
        inputRange: [index - 1, index, index + 1],
        outputRange: [height, 0, 0],
      })

      const opacity = position.interpolate({
        inputRange: [index - 1, index - 0.99, index],
        outputRange: [0, 1, 1],
      })

      return { opacity, transform: [{ translateY }] }
    },
  }),
};

const Tab = createBottomTabNavigator({
  OrderList: {
    screen: createStackNavigator(
      {
        ApplicationList: {
          screen: ApplicationList,
          navigationOptions: {
            headerTitle: '应用'
          }
        }
      }, stackConfig),
    navigationOptions: ({ navigation }) => ({
      tabBarVisible: true,
      tabBarIcon: ({ focused, tintColor }) => (
        <Text>ceshi</Text>
      )
    }),
  }
}, {
  tabBarOptions: {
    inactiveTintColor: '#979797',
    showLabel: false,
    iconStyle: {
      height: 38
    },
  }

});

Tab.navigationOptions = ({ navigation }) => {
  const { routeName } = navigation.state.routes[navigation.state.index]

  return {
    header: null
  }
}


// const MainNavigator = 
// )

const AppNavigator = createStackNavigator(
  {
    Tab: { screen: Tab },
   
  },
  stackConfig
)

export const routerReducer = createNavigationReducer(AppNavigator)


const App = createReduxContainer(AppNavigator, 'root')

function getActiveRouteName(navigationState) {
  if (!navigationState) {
    return null
  }
  const route = navigationState.routes[navigationState.index]
  if (route.routes) {
    return getActiveRouteName(route)
  }
  return route.routeName
}

// @connect(({ app, router }) => ({ app, router }))
class Router extends PureComponent {

  //region 构造函数
  constructor(props, context) {
    super(props, context);
    me = this;
    let { dispatch } = this.props;
    // dispatch({
    //   type: 'router/initTheme'
    // });
    // dispatch({
    //   type: 'router/initScreen'
    // });
    AliyunPush.getDeviceId()
      .then((deviceId) => {
        if (Platform.OS == 'ios' && String(Platform.isPad) == 'true') {
          console.warn('ios ipad');
          AsyncStorage.setItem("ChannelId", 'ipad' + deviceId);
        }
        else {
          AsyncStorage.setItem("ChannelId", deviceId);
        }
      }).catch((error) => {
        console.log("getDeviceId() failed");
      });

    AliyunPush.setApplicationIconBadgeNumber(0);
  }
  //endregion

  componentWillMount() {
    BackHandler.addEventListener('hardwareBackPress', this.backHandle)
  }

  componentWillUnmount() {
    BackHandler.removeEventListener('hardwareBackPress', this.backHandle)
  }

  backHandle = () => {
    const currentScreen = getActiveRouteName(this.props.router)
    if (currentScreen === 'Login') {
      return true
    }
    if (currentScreen !== 'OrderList') {
      this.props.dispatch(NavigationActions.back())
      return true
    }
    return false
  }

  render() {
    // const { app, dispatch, router } = this.props;
    let { location, dispatch, history, router } = this.props;
    // if (app.loading) return <Loading />

    return <App dispatch={dispatch} state={router} />
  }
}

function mapStateToProps(state, ownProps) {
  return {
    router: state.router,
  };
}

function mapDispatchToProps(dispatch, ownProps) {
  return {
    dispatch,
  };
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Router);
